<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>index</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

	<link rel="stylesheet" href="mk-3Dcarousel.css">
	<link rel="stylesheet" type="text/css" href="sidebar.css"></head>
<body>
	<div class="page-group">
		<div class="page page-current"  style="background: rgb(242,235,217);">
			<!-- 你的html代码 -->
			<header class="bar bar-nav" style="background: #fff;">
				<button class="button button-link button-nav pull-left open-panel" data-panel='#panel-left-demo'>
					<img src="images/menu.png" style="display:inline-block;margin-top:14px;margin-left:10px;"></button
				<img src="images/menu.png" class="open-panel" data-panel='#panel-left-demo' style="position:absolute;">
				<h1 class="title">首 页</h1>
			</header>

			<!-- 轮播框 -->
			<div class="content">
				<!-- Slider -->
				<div class="swiper-container" data-space-between='10'>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="http://pic47.nipic.com/20140903/5624330_163300164000_2.jpg" alt="" id="top1" style="width: 100%;height: 200px;"></div>
						<div class="swiper-slide">
							<img src="http://img1.sc115.com/uploads/sc/jpg/152/6730.jpg" alt="" id="top2" style="width: 100%;height: 200px;"></div>
						<div class="swiper-slide">
							<img src="http://picm.photophoto.cn/010/071/014/0710140031.jpg" alt="" id="top3" style="width: 100%;height: 200px;"></div>
						<div class="swiper-slide">
							<img src="http://picm.photophoto.cn/010/071/014/0710140031.jpg" alt="" id="top4" style="width: 100%;height: 200px;"></div>
					</div>
					<div class="swiper-pagination" style="margin-top:-20px;"></div>
				</div>
			</div>
			<!-- 旋转木马 -->
			<article class="htmleaf-container" style="margin-top:250px;">
				<div class="container">
					<div class="mk-carousel" id="mkCarousel">
						<img class="active" src="images/001.jpg" alt="" id="bot1">
						<img src="images/002.jpg" alt="" id="bot2">
						<img src="images/003.jpg" alt="" id="bot3">
						<img src="images/004.jpg" alt="" id="bot4"></div>
				</div>
			</article>
		</div>
		<!-- 侧边栏内容 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo' style="background: #555;">
			<div class="content-block">
				<div id="header">
					<div id="portrait"></div>
					<label id="name">王小生</label>
					<label id="tel">138****4720</label>
				</div>
				<ul id="body">
					<li>
						<a href="http://www.baidu.com">
							<img src="images/my_account.png" class="icon_">
							<label style="color:#fff;" class="list_">个人信息</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/star.png" class="icon_">
							<label style="color:#fff;" class="list_">我的收藏</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/share.png" class="icon_">
							<label style="color:#fff;" class="list_">我的分享</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/books.png" class="icon_">
							<label style="color:#fff;" class="list_">我的图书</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/Wallet.png" class="icon_">
							<label style="color:#fff;" class="list_">我的钱包</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/Gear.png" class="icon_">
							<label style="color:#fff;" class="list_">设置</label>
						</a>
					</li>
					<li>
						<a href="http://www.baidu.com">
							<img src="images/exit_out.png" class="icon_">
							<label style="color:#fff;" class="list_">退出</label>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type="text/javascript">$.init();</script>

	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script src="mk-3Dcarousel.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$.get("http://172.16.100.32:8080/getIndexJson.do",function(result,status){
				alert(result[0].data.topImageUrl);
				$("#top1").attr("src",result[0].data.bottomImageUrl);
				$("#top2").attr("src",result[1].data.bottomImageUrl);
				$("#top3").attr("src",result[2].data.bottomImageUrl);
				$("#top4").attr("src",result[3].data.bottomImageUrl);
				$("#bot1").attr("src",result[0].data.topImageUrl);
				$("#bot2").attr("src",result[1].data.topImageUrl);
				$("#bot3").attr("src",result[2].data.topImageUrl);
				$("#bot4").attr("src",result[3].data.topImageUrl);
			});
		});
	</script>
</body>
</html>